;
(function(doc, tpl, tools) {
    function MyTab(el) {
        this.el = doc.querySelector(el);
        console.log(this.el);
        this.data = JSON.parse(this.el.getAttribute('data'));
        console.log(this.data);
        this.init();
    }

    MyTab.prototype.init = function() {
        this._render();
        this._bindEvent();
    }

    MyTab.prototype._render = function() {
        var tabWrapper = doc.createElement('div');
        var pageWrapper = doc.createElement('div');
        //创建文档碎片
        var oFrag = doc.createDocumentFragment();

        tabWrapper.className = 'tab-wrapper';
        pageWrapper.className = 'page-wrapper';

        this.data.forEach(function(item, index) {
            //在tpl模板js文件中使用switch选择，因为是个函数所以要调用，然后返回对应的模板
            tabWrapper.innerHTML += tools.tplReplace(tpl.tab('tab'), {
                tab: item.tab,
                current: !index ? 'current' : ''
            });
            pageWrapper.innerHTML += tools.tplReplace(tpl.tab('page'), {
                page: item.page,
                current: !index ? 'current' : ''
            })
        });
        // 循环添加完成
        //先把tab和page都放在Fragment碎片中，然后再统一添加到页面中，减少dom操作次数
        oFrag.appendChild(tabWrapper);
        oFrag.appendChild(pageWrapper);
        console.log(oFrag);
    }

    MyTab.prototype._bindEvent = function() {

    }

    window.MyTab = MyTab;
})(document, tpl, tools);